<script lang="ts" setup>

import ACard from "@/components/a-card.vue";
</script>

<template>
  <a-card :shadow="false">
    <view class="grid-4">
      <view class="flex-column-center">
        <view class="icon">新</view>
        <view class="u-f-sm l-30">新品</view>
      </view>
      <view class="flex-column-center">
        <view class="icon">类</view>
        <view class="u-f-sm l-30">分类</view>
      </view>
      <view class="flex-column-center">
        <view class="icon">促</view>
        <view class="u-f-sm l-30">促销</view>
      </view>
      <view class="flex-column-center">
        <view class="icon">会</view>
        <view class="u-f-sm l-30">会员</view>
      </view>
    </view>
  </a-card>
</template>

<style scoped lang="scss">
@import "~@/static/css/index.css";

.icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto 10rpx;
  background: #FF4E50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;

  &>view::after {
    content: "";
    position: absolute;
    top: 0;
    right: -10rpx;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 78, 82, 0.2);
  }
}
</style>